<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
    />
    <title>MyCurriculumVitae
</title>
    <style>
      * {
        box-sizing: border-box;
      }
    
      body {
        background: #eee;
        margin: 20px 0;
      }
    
      article {
        width: 21cm;
        min-height: 29.7cm;
        background: white;
        margin: 0 auto;
        overflow: auto;
        padding: 1em;
      }
    </style>
    <style media="print">
      body {
        margin: 0;
      }
  
      .page2 {
        page-break-before: always;
        margin-top: 30px;
    }
    </style>
    <style>
      body {}
    
      p {
        margin: .3em 0;
      }
    
      h1 {
        font-size: 25px;
        margin-top: 0;
      }
    
      h4,h5,h6 {
        font-weight: normal;
      }
    
      ol,ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
    
      strong {
        font-weight: normal;
        color: #f60;
      }
    
      a {
        color: #999;
        text-decoration: none;
        border-bottom: 1px solid;
      }
    
      p,
      li {
        color: #666;
      }
    
      strong {
        font-weight: normal;
      }
    
      h3,h4,h5,h6 {
        margin: 0;
      }
    
      .bio {
        position: relative;
      }
    
      .bio img {
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
    <style>
      .projects {}

      .projects p {
        color: #666;
      }

      .projects strong {
        color: #f60;
      }

      .projects>ol {
        margin-top: 0;
        list-style-position: inside;
        padding: 0;
      }

      .projects>ol>li {
        margin-bottom: 24px;
      }

      .projects>ol>li>header {
        display: flex;
        justify-content: space-between;
      }

      .projects>ol>li h3 {
        display: inline-block;
      }
    </style>
    <style>
      .openSource {}
    
      .openSource>h2 {}
    
      .openSource header img {
        position: absolute;
        top: 0;
        right: 0;
      }
    
      .openSource>ul {}
    
      .openSource>ul>li {
        margin-bottom: 24px;
      }
    
      .openSource header {
        position: relative;
        display: flex;
        justify-content: space-between;
      }
    
      .openSource h3 {}
    </style>
    <style>
        .skills {}
      
        #skills {
          width: 500px;
          height: 260px;
        }
      
        @media print {
          #skills {
            display: none;
          }
        }
        .skills>.wrapper {
          display: flex;
          justify-content: space-between;
        }
        .skills>.wrapper>:first-child {
          margin-right: 24px;
        }
        .skills>.wrapper>#skills {}
      
        .skills>.wrapper>ul {
          color: #666;
        }
      
        .skills>.wrapper strong {
          color: #f60;
        }
      
        .skills>.wrapper>ul>li {
          line-height: 1.2;
          margin-bottom: 8px;
        }
    </style>
    <style>
      .jobs {}
    
      .jobs>h2 {}
    
      .jobs>ol {}
    
      .jobs>ol>li {
        margin: 12px 0;
      }
    
      .jobs header {
        display: flex;
        color: #666;          margin-bottom: 12px;
      }
    
      .jobs header>h3 {
        font-size: 18px;
        color: #333;
      }
    
      .jobs header>h4 {
        margin-left: 1em;
        font-size: 18px;
      }
    
      .jobs header>span {
        font-size: 18px;
        margin-left: auto;
        }
    </style>

    <style>
      @media (max-width:500px){
        body{
          margin:0;
        }
        article{
          width:auto;
          height:auto;
        }
        .bio img{
          display: none;
        }
        .skills .wrapper{
          flex-direction: column; 
        }
        #skills{
          width:auto;
        }
        .jobs header{
          flex-direction: column;
        }
        .jobs header >h3,
        .jobs header >h4,
        .jobs header >span {
          margin:0;
        }
      }
    </style>
  </head>
  
  <body>
    <article>
      <section class="bio">
        <h1>陈小杰</h1>
        <img src="images/1.jpg" alt="" width="100" />
        <p> 意向岗位：前端开发工程师 | 工作地点：厦门</p>
        <p>
          手机：<a href="tel:15711559679">15711559679</a> | 微信：15711559679 | 邮箱：<a href="mailto:rockyshawn@foxmail.com">rockyshawn@foxmail.com</a>
        </p>
      </section>

      <section class="education">
        <h2>教育经历</h2>
        <p>
          <span><time>2012年</time>~<time>2016年</time></span>
          福州大学统招（211）采矿工程 本科
        </p>
      </section>

  <section class="projects">
    <h2>项目经历</h2>
      <ol>
        <li>
          <header>
            <h3>熊猫UI组件库</h3>
            <span>
              <a href="https://gitee.com/shawnjonchan/panda-ui-demo/tree/main/src">源码链接</a>
              <a href="https://shawnjonchan.gitee.io/panda-ui-demo/">项目预览</a>
            </span>
          </header>
          <p>该项目是参照 Ant Design、Element UI、iView 等 UI 库思路，利用 Vue / ES6 / SCSS 等技术实现的<strong>简易 UI 组件库</strong>，目前已支持按钮、输入框、布局、网格、Tabs、Toast、Popover、<strong>Collapse手风琴</strong>等组件。</p>
          <p>组件库基于<strong>发布订阅模式</strong>、<strong>单向数据流</strong>、<strong>API正交</strong>等设计模式，每个组件均经历从<strong>需求分析</strong>到<strong> Mocha 单元测试</strong>，并用<strong> TravisCI 实现持续集成</strong>，最终以<strong> VuePress </strong>为基础制作官方文档，发布于 npmjs.org。</p>
          <p>完成该项目使我对 Vue 组件化等常用特征更加熟悉，同时提升了自己对<strong>前端工程化</strong>流程以及单元测试重要性的深刻理解，近一步了解开源文化。</p>
          <p>该项目</p>
        </li>
        <li>
          <header>
            <h3>香蕉记账</h3>
            <span>
              <a href="https://gitee.com/shawnjonchan/morney">源码链接</a>
              <a href="http://shawnjonchan.gitee.io/morney-banana-website/#/money">项目预览</a>
            </span>
          </header>
          <p>
            香蕉记账是一款基于 <strong>Vue</strong> /
            <strong>VueRouter</strong>、 <strong>Vuex</strong>及<strong>TypeScript</strong>等技术实现的移动端单页面应用。
          </p>
          <p>
            项目是本人从实际需求出发，借鉴开源设计实现的极简记账应用，特点是快速记账，回顾分析消费习惯。
          </p>
          <p>
            期间也遇到很多 Vuex 和 TypeScript 方面的问题，最后通过Google、查找文档及知乎询问等方式解决，让我对TypeScript及Vue有了更深的理解。
          </p>
        </li>
        <li>
          <header>
            <h3>Base前端导航站点</h3>
            <span>
              <a href="https://gitee.com/shawnjonchan/nav-1 ">源码链接</a>
              <a href="http://shawnjonchan.gitee.io/nav-1/src/index.html">项目预览</a>
            </span>
          </header>
          <p>一款适配于<strong>手机端与PC端</strong>的首页导航项目，设计理念借鉴开源项目，实现了网页收藏栏的添加、删除、搜索、<strong>一键跳转</strong>等功能。</p>
          <p>
            项目使用了<strong>jQuery</strong>、<strong>LocalStorage</strong>、<strong>SVG</strong>、<strong>Symbols</strong>、<strong>媒体查询</strong>实现等
          </p>
        </li>
    </ol>
  </section>

<section class="openSource">
  <h2>开源项目</h2>
    <ul>
      <li>
        <header>
          <h3>跳动的皮卡丘</h3>
            <span>
              <a href="https://gitee.com/shawnjonchan/pikachu-2/tree/master/src">源码链接</a>
              <a href="http://shawnjonchan.gitee.io/pikachu-2/src/test.html">项目预览</a>
              </span>
        </header>
            <p>这是一个基于原生 JavaScript和CSS3 完成的项目，利用JS动态写入HTML和CSS，模拟从零到一画出皮卡丘的过程。在制作过程中我加深了对<strong>CSS3和动画</strong>的理解。</p>
        </li>
      <li>
        <header>
          <h3>Canvas在线画板</h3>
          <span>
            <a href="https://gitee.com/shawnjonchan/canvas-demo-2">源码链接</a>
            <a href="http://shawnjonchan.gitee.io/canvas-demo-2/src/index.html">项目预览</a>
          </span>
        </header>
        <p>这是一个基于原生<strong>JavaScript</strong>和 <strong>Canvas</strong>完成的项目，实现的功能包括选择画笔颜色、用橡皮擦擦除、清除、下载图片等。</p>
      </li>
      <li>
        <header>
          <h3>画太极图</h3>
          <span>
            <a href="https://gitee.com/shawnjonchan/taiji-1">源码链接</a>
            <a href="http://shawnjonchan.gitee.io/taiji-1/src/index.html">项目预览</a>
          </span>
        </header>
        <p>这是我在学习<strong>CSS3和动画</strong>时制作的一个动态绘制太极图案作品</p>
        <p>在动态输出代码的同时，动态绘制一张太极图案，期间运用了CSS技巧和<strong>原生JavaScript</strong>，使我对CSS等知识有了进一步的了解。</p>
      </li>
      <li>
        <header class="page2">
          <h3>自己写的 DOM 库</h3>
          <a href="https://github.com/shawnjonchan/DOM-1/blob/main/src/dom.js">源码链接</a>
        </header>
        <p>在学DOM时，为了能熟练掌握 DOM API，我封装了一个DOM库，实现了元素选择、元素创建、元素删除、<strong>事件委托</strong>等常见功能，并总结了一篇<a href="https://juejin.im/post/6875520999736115213/">手写DOM库的博客。</a></p>
      </li>
   </ul>
 </section>

<section>
  <header>
    <h2>其他链接</h2>
  </header>
  <p>
    我的 <a href="https://www.yuque.com/sixiyoukedawanzi/kmnxt3">羽雀</a>、<a
      href="https://juejin.im/user/1574156384348295/posts">掘金</a>，目前共有 55 篇技术文章
  </p>
</section>

 <section class="skills">
    <h2 class="page2">技能</h2>
    <div class="wrapper">
      <div id="skills"></div>
        <ul>
          <li>熟悉页面制作技巧，能将设计稿<strong>较好还原</strong> </li>
          <li>熟悉<strong>前后端分离</strong>技术，包括 AJAX、跨域、前端路由、Cookie、Session 等</li>
          <li>熟练掌握 <strong>Vue全家桶</strong>的使用，包括 VueCli、VueRouter、Vuex 等</li>
          <li>熟练掌握 <strong>React全家桶</strong>的使用，包括 create-react-app、ReactRouter、Redux 等</li>
          <li>熟悉 ES6，包括 let / Promise / await / 析构赋值</li>
          <li>了解 <strong>TypeScript</strong> 的使用，我的项目就是 TS 实现的</li>
          <li>了解 <strong>Webpack 的配置和优化</strong></li>
        </ul>
      </div>
    </section>
    </article>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
    <script src="./main.js"></script>
  </body>
</html>
